<template>
	<view class="content">
		<view class="row b-b">
			<text class="tit">银行卡号</text>
			<input class="input" type="number" @input="setCardNum" v-model="cardData.cardNum" maxlength="25" placeholder="请输入银行卡号"
			 placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">选择银行</text>
			<picker @change="PickerChange" :value="cardData.bankName" :range="bankNameList">
				<view class="picker">
					{{cardData.bankName ?bankNameList[cardData.bankName] : '请选择银行'}}
				</view>
			</picker>
		</view>
		<view class="row b-b">
			<text class="tit">开户支行</text>
			<input class="input" type="text" maxlength="100" v-model="cardData.bankAddress" placeholder="请输入开户支行"
			 placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">卡主姓名</text>
			<input class="input" type="text" maxlength="50" v-model="cardData.cardName" placeholder="请输入卡主姓名" placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">手机号码</text>
			<input class="input" type="number" v-model="cardData.cardPhone" maxlength="11" placeholder="请输入银行预留手机号"
			 placeholder-class="placeholder" />
		</view>
		<view class="row b-b">
			<text class="tit">卡属性</text>
			<picker @change="PickerChange" :value="cardData.cardType" :range="cardTypeList">
				<view class="picker">
					{{cardTypeList[cardData.cardType]}}
				</view>
			</picker>
		</view>
		<button class="add-btn" @click="deleteCard">删除</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				bankNameList: ['中国银行','农业银行','工商银行','建设银行','邮政储蓄银行',"交通银行","招商银行","兴业银行","中信银行","浦发银行","广发银行","民生银行","华夏银行","平安银行"],
				cardTypeList: ['储蓄卡'],// ['储蓄卡', '信用卡']
				cardData: {
					cardName: '',
					cardPhone: '',
					bankAddress: '',
					bankName: '',
					cardType: '0',
					cardNum: ''
				}
			}
		},
		onLoad(option) {
			if (option.id) {
				this.id = option.id;
				var that = this;
				that.$network.request("UserCardAction/getCardById", {
					id: that.id
				}, function(res) {
					if (res.data.state) {
						that.cardData = res.data.card;
						that.cardData.cardNum = res.data.card.cardNumber;
					} else {
						uni.showToast({
							icon: 'none',
							title: '加载失败',
							duration: 1200
						})
					}
				}, "", function(res) {
					console.error(JSON.stringify(res))
					uni.showToast({
						icon: 'none',
						title: '加载失败',
						duration: 1200
					})
				});
			}
		},
		methods: {
			deleteCard() {
				if (this.id) {
					var that = this;
					that.$network.request("UserCardAction/deletedCard", {
						id: that.id
					}, function(res) {
						if (res.data.state) {
							uni.showToast({
								icon: 'success',
								title: "删除成功",
								duration: 1200
							})
							setTimeout(function() {
								uni.navigateBack({})
							}, 1200)
						}
					}, "", function(res) {
						console.error(JSON.stringify(res))
						uni.showToast({
							icon: 'none',
							title: '删除失败',
							duration: 1200
						})
					});
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: $page-color-base;
		padding-top: 16upx;
	}

	.row {
		display: flex;
		align-items: center;
		position: relative;
		padding: 0 30upx;
		height: 110upx;
		background: #fff;

		.tit {
			flex-shrink: 0;
			width: 140upx;
			font-size: 30upx;
			color: $font-color-dark;
		}

		.input {
			flex: 1;
			font-size: 30upx;
			color: $font-color-dark;
		}

		.icon-shouhuodizhi {
			font-size: 36upx;
			color: $font-color-light;
		}
	}

	.default-row {
		margin-top: 16upx;

		.tit {
			flex: 1;
		}

		switch {
			transform: translateX(16upx) scale(.9);
		}
	}

	.add-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 690upx;
		height: 80upx;
		margin: 60upx auto;
		font-size: $font-lg;
		color: #fff;
		background-color: $base-color;
		border-radius: 10upx;
		box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
	}
</style>
